<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import chainJSON from './china.json'
let map = ref()
// 注册中国地图
echarts.registerMap('china', chainJSON as any)
onMounted(() => {
  let point_line = [
    {
      coords: [
        [109.754859, 19.189767], // 初始点经纬度
        [116.41995, 40.18994], //目标点经纬度
      ],
      label: {
        start: '海口',
        end: '北京',
      },
    },
    {
      coords: [
        [109.754859, 19.189767],
        [85.294711, 41.371801],
      ],
      label: {
        start: '海口',
        end: '乌鲁木齐',
      },
    },
    {
      coords: [
        [110.3467, 41.4899],
        [109.754859, 19.189767],
      ],
      lineStyle: {
        // 自定样样式
        color: '#52b9c7',
      },
      label: {
        start: '呼和浩特',
        end: '海口',
      },
    },
    {
      coords: [
        [125.8154, 44.2584],
        [103.5901, 36.3043],
      ],
      lineStyle: {
        color: '#5abead',
      },
      label: {
        start: '长春',
        end: '兰州',
      },
    },
    {
      coords: [
        [119.4543, 25.9222],
        [103.5901, 36.3043],
      ],
      label: {
        start: '福州',
        end: '兰州',
      },
    },
    {
      coords: [
        [106.3586, 38.1775],
        [119.4543, 25.9222],
      ],
      label: {
        start: '银川',
        end: '福州',
      },
    },
    {
      coords: [
        [114.4995, 38.1006],
        [119.4543, 25.9222],
      ],
      label: {
        start: '石家庄',
        end: '福州',
      },
    },
    {
      coords: [
        [117.4219, 39.4189],
        [109.754859, 19.189767],
      ],
      label: {
        start: '天津',
        end: '海口',
      },
    },
  ]
  let myCharts = echarts.init(map.value)
  myCharts.setOption({
    geo: {
      map: 'china',
      roam: true,
      top: 0,
      left: 30,
      bottom: 0,
      right: 30,
      label: {
        show: true,
        color: '#fff',
      },
      itemStyle: {
        areaColor: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#003382', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#03224a', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        borderColor: 'rgba(59,165,241,0.8)',
        borderWidth: 0.8,
        shadowColor: 'rgba(55,152,222,0.8)',
        shadowOffsetX: 0, // 折线的X偏移
        shadowOffsetY: 0, // 折线的Y偏移
        shadowBlur: 30, // 折线模糊
      },
      emphasis: {
        itemStyle: {
          color: 'rgba(59,165,241,1)',
        },
        label: {
          color: '#fff',
          fontSize: 24,
        },
      },
    },
    series: [
      {
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          symbolSize: 5,
          color: '#E4AA0C',
          symbol: 'arrow',
        },
        lineStyle: {
          color: '#F56828',
          width: 1, //线条宽度
          curveness: 0.3,
        },
        tooltip: {
          backgroundColor: 'rgba(245,108,45,0.5)',
        },
        data: point_line,
      },
    ],
  })
})
</script>

<template>
  <div>
    <p>景区实时客流量</p>
    <div class="charts" ref="map"></div>
  </div>
</template>

<style scoped lang="scss">
div {
  width: 100%;
  height: 100%;
  p {
    width: 200px;
    height: 30px;
    background: url('../../images/map-title-bg.png') no-repeat;
    background-size: cover;
    color: white;
    text-align: center;
    line-height: 30px;
  }
  .charts {
    width: 100%;
    height: 100%;
  }
}
</style>
